<template>
  <bazi-section title="六亲图示">
    <view class="liuqin-containter" v-if="isVip!=1">
      <view class="liuqin-tips"><span class="red">红色</span>为喜用，对你有利；<span class="green">绿色</span>为忌凶，对你不利</view>
      <view class="liuqin-table">
        <view class="th">
          <view class="th-item">年柱</view>
          <view class="th-item">月柱</view>
          <view class="th-item">日柱</view>
          <view class="th-item">时柱</view>
        </view>
        <view class="tr">
          <view class="tr-item">
            <view class="jx-sizhu" :style="liuqinJX(baziResult.bzLiuQinJx.yearGanLiuQin)">{{ tiangan[0] }}</view>
            <view class="jx-type">
              <view>父亲</view>
              <view>父亲家族</view>
            </view>
          </view>
          <view class="tr-item">
            <view class="jx-sizhu" :style="liuqinJX(baziResult.bzLiuQinJx.monthGanLiuQin)">{{ tiangan[1] }}</view>
            <view class="jx-type">
              <view>堂兄弟</view>
              <view>社会上兄姐</view>
            </view>
          </view>
          <view class="tr-item">
            <view class="jx-sizhu jx-self">{{ tiangan[2] }}</view>
            <view class="jx-type">自己</view>
          </view>
          <view class="tr-item">
            <view class="jx-sizhu" :style="liuqinJX(baziResult.bzLiuQinJx.timeGanLiuQin)">{{ tiangan[3] }}</view>
            <view class="jx-type">长子</view>
          </view>
        </view>
        <view class="tr">
          <view class="tr-item tr-dizhi">
            <view class="jx-sizhu" :style="liuqinJX(baziResult.bzLiuQinJx.yearZhiLiuQin)">{{ dizhi[0] }}</view>
            <view class="jx-type">
              <view>母亲</view>
              <view>母亲家族</view>
            </view>
          </view>
          <view class="tr-item">
            <view class="jx-sizhu" :style="liuqinJX(baziResult.bzLiuQinJx.monthZhiLiuQin)">{{ dizhi[1] }}</view>
            <view class="jx-type">
              <view>表弟妹</view>
              <view>社会上弟妹</view>
            </view>
          </view>
          <view class="tr-item">
            <view class="jx-sizhu" :style="liuqinJX(baziResult.bzLiuQinJx.dayZhiLiuQin)">{{ dizhi[2] }}</view>
            <view class="jx-type">
              <view>夫妻</view>
              <view>夫妻家族</view>
            </view>
          </view>
          <view class="tr-item tr-dizhi">
            <view class="jx-sizhu" :style="liuqinJX(baziResult.bzLiuQinJx.timeZhiLiuQin)">{{ dizhi[3] }}</view>
            <view class="jx-type">次子</view>
          </view>
        </view>
      </view>
    </view>
    <view v-else>
      <no-vip></no-vip>
    </view>
  </bazi-section>
</template>
<script>
  import { mapGetters } from 'vuex';
  import baziSection from './section.vue'
  export default {
    components: {
      baziSection
    },
    props: {
      result: {
        type: Object,
        default: {}
      }
    },
    computed: {
      ...mapGetters({
        isVip: 'user/isVip'
      })
    },
    data() {
      return {
        baziResult: this.result,
        tiangan: [],
        dizhi: []
      }
    },
    mounted() {
      this.tiangan = [this.baziResult.yearGan, this.baziResult.monthGan, this.baziResult.dayGan, this.baziResult
        .timeGan];
      this.dizhi = [this.baziResult.yearZhi, this.baziResult.monthZhi, this.baziResult.dayZhi, this.baziResult.timeZhi];
    },
    methods: {
      // 六亲吉凶颜色
      liuqinJX(type) {
        if (type == "吉") {
          return "background-color: #890202"
        }
        if (type == "凶") {
          return "background-color: #418902"
        }
        return ""
      }
    }
  };
</script>

<style lang="scss" scoped>
  .section {
    width: 100%;
    height: 72rpx;
    color: white;
    background: #C5A680;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10rpx 46rpx;

    .section-title {
      padding-right: 22rpx;
    }
  }

  .liuqin-containter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 32rpx;

    .liuqin-tips {
      font-size: 24rpx;
      color: #787878;
      padding: 10rpx 48rpx;

      .red {
        color: #890202;
      }

      .green {
        color: #418902;
      }
    }
  }

  .liuqin-table {
    width: 650rpx;
    margin: auto;

    .th {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;

      .th-item {
        width: 25%;
        white-space: nowrap;
        text-align: center;
        color: #2C2C2C;
        background-color: #E2DBD4;
        border: 2rpx solid #525252;
        margin: 0 -2rpx -2rpx 0;
        padding: 4rpx 0;
      }

      .th-item:first-child {
        border-radius: 4rpx 0 0 0;
        border: 2rpx solid #4B240D;
      }

      .th-item:last-child {
        border-radius: 0 4rpx 0 0;
        border: 2rpx solid #4B240D;
      }
    }

    .tr {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;

      .tr-item {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 2rpx solid #4B240D;
        margin: 0 -2rpx -2rpx 0;
        padding: 8rpx 0 10rpx;
      }

      .tr-dizhi:first-child {
        border-radius: 0 0 0 10rpx;
        border: 2rpx solid #4B240D;
      }

      .tr-dizhi:last-child {
        border-radius: 0 0 10rpx 0;
        border: 2rpx solid #4B240D;
      }
    }
  }

  .jx-sizhu {
    color: #FFFFFF;
    
    font-size: 40rpx;
    padding: 6rpx;
  }

  .jx-self {
    color: #2C2C2C;
  }

  .jx-type {
    color: #787878;
    font-size: 24rpx;
    text-align: center;
    line-height: 32rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 4rpx;
  }
</style>